<template>
  <div style="width:100%;height:100%;display:flex">

        
    <div class="left"> 
        <div class="leftTop">
            <p>ORDER聚造</p>
            <img src="../../public/image/leftTop.png" alt="">
        </div>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="transparent"
            text-color="#fff"
            :router="true"
            active-text-color="#ffd04b">
            <el-submenu index="1">
                <template slot="title">
                <i class="el-icon-location"></i>
                <span>首页管理</span>
                </template>
                <el-menu-item-group>
                <el-menu-item index="/index/banner">轮播图管理</el-menu-item>
                <el-menu-item index="/index/category">分类区管理</el-menu-item>
                <el-menu-item index="/index/recommend">为您推荐管理</el-menu-item>
                </el-menu-item-group>               
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品管理</span>
                </template>
                <el-menu-item-group>
                <el-menu-item index="/index/variety">分类管理</el-menu-item>
                <el-menu-item index="/index/brand">品牌管理</el-menu-item>
                <el-menu-item index="/index/product">商品管理</el-menu-item>
                <el-menu-item index="/index/singalProduct">单品管理</el-menu-item>
                </el-menu-item-group>               
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                <i class="el-icon-location"></i>
                <span>新闻管理</span>
                </template> 
                <el-menu-item-group>
                <el-menu-item index="/index/news">新闻管理</el-menu-item>
                </el-menu-item-group>            
            </el-submenu>
            </el-menu>
        <!-- </div> -->
    </div>
    <div class="right">
        <div class="rightTop">
        <span style="margin-left:32px;margin-top:20px"><b>{{ $route.meta.title }}</b></span>
                <div class="rightRight" style="margin-left:700px">
                    
                    <div class="right1">
                        <el-avatar :size="50" :src="photo"></el-avatar>
                    </div>
                    <div >
                        <span style="color: #eab924;margin:0px 8px;" class="p1"><b>{{group.groupName}}</b></span>
                        <el-tooltip placement="bottom">
                            <div slot="content" @click="dialogFormVisible=true" class="cursor">修改密码</div>
                            <span class="p2">{{nickName}}</span>
                        </el-tooltip>
                        <span class="p2">,您好！</span>
                        <el-button type="danger" size="small" class="exit" round icon="el-icon-switch-button" @click="logout">退出</el-button>
                    </div>
                </div>
        </div>
        <router-view></router-view>
    </div>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
            <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
            <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
            <el-input type="password" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
        <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
        </el-form>
      <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="changePassWord">确定</el-button>
      </div>
    </el-dialog>
  </div>  
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'App',
  components: {
    //HelloWorld
  },
  data(){
    return {
        photo:"",
        nickName:"",
        dialogFormVisible:false,
        form:{
            passWord:'',
            newPassWord:'',
            reNewPassWord:'',
        },
        group:{///选中的群组
            groupId:'',
            groupName:'',
        },
        menus:[],//菜单树
        rules:{
            passWord:[
                { required: true, message: '请输入原密码', trigger: 'blur'}
            ],
            newPassWord:[
                { required: true, message: '请输入新密码', trigger: 'blur'}
            ],
            reNewPassWord:[
                { required: true, message: '请重新输入新密码', trigger: 'blur'},
                { validator: (rule, value, callback) =>{
                    if (value === ''){
                        callback(new Error('请再次输入密码'));
                    }else if (value !== this.form.newPassWord) {
                        callback(new Error('两次输入密码不一致!'));
                    }else {
                        callback();
                    }
                },trigger:'blur'}
            ],
        }
    }
  },
  methods:{
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    },
    changePassWord(){
        this.$refs.form.validate((valid) => {
            if(valid){
                this.$http({
                    url:'/admin/changePassWord',
                    method:'POST',
                    data:{
                        passWord:md5(this.form.passWord),
                        newPassWord:md5(this.form.newPassWord),
                        userName:this.form.userName
                    }
                }).then(res =>{
                    if(!res.errorMsg){
                        this.dialogFormVisible = false
                        this.$message({
                            message:'修改密码成功',
                            type:'success',
                            duration:3000
                        });
                        setTimeout(()=>{
                            location.href = '#/login'
                        },3000)
                        location.href = '#/login'
                    }
                })
            }else{
                return false;
            }
        })
    },
    logout(){
        this.$confirm("是否退出登录？","提示",{
            confirmButtonText:"确定",
            cancelButtonText:"取消",
            type:"waring",
        }).then(() => {
            this.$http({
                url:"/admin/logout",
            }).then((res)=> {
                if (res.errorMsg) {
                    this.$message.error(res.errorMsg);
                }else{
                    localStorage.removeItem('token')
                    localStorage.removeItem('user')
                    location.href = '#/login';
                }
            })
        })
    },
    getMenus(){
        this.$http({
            url:"/v1/leftMenuTree",
            params:{
                groupId:this.group.groupId
            }
        }).then((res) => {
            //菜单数据
            if(!res.errorMsg) this.menus = res
        })
    }
  },
  created(){
      let user = localStorage.getItem("user");
      if(!user){
          location.href = '#/login'
      }else{
        user = JSON.parse(user);
        this.photo = user.avatarURL || require("../../public/image/head.png");
        this.nickName = user.nickName || "小王"
      }
  },
  mounted(){

  }
}
</script>

<style> 
    /* scoped表示样式仅对当前页面生效 */
html,body{

  width: 100%;
  height: 100%;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;

}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

body {   
    display: flex;
    background-size: 100% 100%;
    background: #EFF6FC;
    position: absolute;
}
.left {
    height: 640px;
    width: 200px;
    background: black;
}
.leftTop {
    display: flex;
}
.leftTop p {
    width: 98px;
    height: 22px;
    font-size: 18px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    color: #FFFFFF;
    margin-top: 6px;
    margin-left: 40px;
}
.leftTop img {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-left: 20px;
}
/* 右边 */
.rightTop {
    display: flex;

}
.rightLeft {
    display: flex;
    height: 35px;
    margin-left: 36px;
}
.rightLeft p {
    height: 35px;
    font-size: 16px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #2C2C2C;
    margin-left: 10px;
    margin-right: 10px;
}
.rightRight {
    display: flex;
    height: 35px;
}
.rightRight img {
    width: 35px;
    height: 35px;
    margin-top: 10px;
    margin-left: 450px;
}
.rightRight .p1 {
    width: 80px;
    font-size: 14px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    font-weight: normal;
    margin-top: 15px;
    margin-left: 8px;
    color: #EAB924;
}
.rightRight .p2 {
    width: 90px;
    font-size: 14px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    font-weight: normal;
    margin-top: 15px;
    margin-left: 8px;
    color: #2c2c2c;
}
.exit {
    width: 69px;
    height: 28px;
    margin-top: 10px;
    margin-left: 4px;
    text-align: center;
    background: #F56C6C;
    border-radius: 14px 14px 14px 14px;
    opacity: 1;
}
.exit p {
    color: #ffffff;
}
.rightMain {
    display: flex;
    height: 450px;
    margin-left: 32px;
    background: #ffffff;
}
.rightMainLeft p{
    margin-left: 30px;
}
.input {
    width: 400px;
    height: 30px;
    margin-left: 10px;
    border: 1px solid #247aea;
}
.select {
    width: 400px;
    height: 30px;
    margin-left: 10px;
    border: 1px solid #247aea;
}
.time {
    width: 180px;
    height: 30px;
    margin-left: 10px;
    border: 1px solid #247aea;
}
.action {
    margin-left: 10px;
}
.special {
    margin-left: 10px;
}
.textarea {
    width: 400px;
    height: 80px;
    /* margin-top: 20px; */
    margin-left: 10px;
}
.rightMainRight p{
    /* margin-top: 30px; */
    margin-left: 30px;
}
.bottom {
    display: flex;
    width: 1100px;
    height: 100px;
    text-align: center;
    margin-left: 32px;
    background: #ffffff;
}
.save {
    width: 71px;
    height: 36px;
    line-height: 36px;
    margin-top: 40px;
    margin-left: 26px;
    background: #63B0FF;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
}
.cancle {
    width: 30px;
    height: 36px;
    font-size: 14px;
    margin-top: 50px;
    margin-left: 35px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    color: #2C2C2C;
    line-height: 18px;
}


.switch {
    width: 57px;
    height: 28px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
}
.switch:before {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch:checked {
    border-color: #64bd63;
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
}
.switch:checked:before {
    left: 30px;
}
.switch.switch-anim {
    margin-top: 30px;
    margin-left: 20px;
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.switch.switch-anim:before {
    transition: left 0.3s;
}
.switch.switch-anim:checked {
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
    transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.switch.switch-anim:checked:before {
    transition: left 0.3s;
}
</style>